<template>
  <p>child</p>
  <!-- 模板页面使用props数据，只要接受就可以直接使用（和之前一样） -->
  <p>{{ num }}</p>
  <button @click="$emit('setNum')">按钮</button>
  <button @click="handleClick">按钮</button>
</template>

<script lang="ts">
export default {
  name: "Child",
  props: {
    num: {
      type: Number,
      required: true,
    },
  },
  emits: ["setNum"],
  setup(props, context) {
    // 在setup中使用props数据，需要通过第一个参数
    console.log(props.num);

    const handleClick = () => {
      /*
        context
          attrs --> this.$attrs
          emit --> this.$emit
      */
      // 触发自定义事件
      context.emit("setNum");
    };

    return {
      handleClick,
    };
  },
};
</script>
